<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-06-27 23:00:23
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 主页顶部左侧用户信息
-->
<template>
  <div class="top-left">
    <div class="user-box">
      <div class="user-img-box">
        <img :src="userData.icon" alt="" />
      </div>
      <div class="user-info-box">
        <div class="info name">{{ userData.real_name }}</div>
        <div class="info phone">{{ userData.intro }}</div>
      </div>
      <div class="edit-btn" @click="runTo('/editUserInfo')">
        编辑资料
      </div>
    </div>
    <div class="line"></div>
    <div class="top-left-cnt">
      <div v-for="item in propertylist" :key="item.name" class="list">
        <div class="name">{{ item.name }}</div>
        <div class="value">
          {{ item.value }}
          <span class="unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <div class="top-left-bottom">
      <div class="lt">
        <i class="iconfont icon-v"></i>
        易问通会员
      </div>
      <div class="vip">尊享XX项专属特权</div>
      <span class="open-vip-btn" @click="runTo('')">立即开通 ></span>
    </div>
  </div>
</template>

<script>
import { getInfo, getProperty } from '@/api/user'
export default {
  name: 'HomeUserInfo',
  data() {
    return {
      userData: {
        id: 1,
        users_uniqueid: '',
        real_name: '', // 姓名
        icon: '', // 头像
        unit_name: '', // 单位名称
        unit_logo: '', // 单位logo
        unit_department: '', // 部门
        unit_title: '', // 职位
        unit_job: '', // 任职
        intro: '', // 简介
        create_datetime: '2024-04-07 13:49:04',
        update_datetime: '2024-04-07 13:49:04',
        phone_visible_switch: 0, // 手机号可见性:0=隐藏,1=可见
        unit_level: '', // 单位级别
        real_photo: '' // 真人照片
      },
      propertylist: [
        { name: '空间剩余', value: '--', unit: 'GB' },
        { name: '剩余流量', value: '--', unit: 'GB' },
        { name: '时长余额', value: '--', unit: '秒' },
        { name: 'E币余额', value: '--', unit: '个' }
      ]
    }
  },
  computed: {},
  created() {
    this.gertUserData()
    this.getPropertyData()
  },
  methods: {
    gertUserData() {
      getInfo().then((res) => {
        this.userData = res.data
      })
    },
    getPropertyData() {
      getProperty().then((res) => {
        const size = this.bytesTosize(res.data.data_traffic_size)
        const disk_size = this.bytesTosize(res.data.disk_size)
        this.propertylist = [
          { name: '空间剩余', value: disk_size.size, unit: disk_size.unit },
          { name: '剩余流量', value: size.size, unit: size.unit },
          {
            name: '时长余额',
            value: res.data.video_render_duration,
            unit: '秒'
          },
          { name: 'E币余额', value: res.data.cash_price, unit: '个' }
        ]
      })
    },
    bytesTosize(bytes) {
      if (bytes === 0 || bytes === '') {
        return {
          size: 0,
          unit: 'B'
        }
      }
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      // return (bytes / Math.pow(k, i)) + ' ' + sizes[i]
      return {
        size: (bytes / Math.pow(k, i)).toFixed(2),
        unit: sizes[i]
      }
    },
    runTo(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-left {
  width: calc(60% - 20px);
  height: 100%;
  background: linear-gradient(180deg, #dff9ee 0%, #ffffff 20%);
  border-radius: 4px 4px 4px 4px;
  margin-right: 20px;
  padding: 20px;

  .user-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 80px;
    position: relative;

    .user-img-box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #eee;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-info-box {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      padding-left: 12px;
      font-size: 14px;
      color: #9e9e9e;

      .info {
        line-height: 26px;
      }

      .name {
        font-weight: 600;
        font-size: 20px;
        color: #1c1f23;
      }
    }

    .edit-btn {
      position: absolute;
      top: 35px;
      right: 0;
      font-size: 12px;
      color: #04d1b8;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #04d1b8;
      padding: 2px 4px;
      cursor: pointer;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 20px 0;
  }

  .top-left-cnt {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .list {
      .name {
        font-size: 14px;
        color: #6a6b6c;
        line-height: 16px;
      }

      .value {
        font-weight: 600;
        font-size: 24px;
        color: #1c1f23;
        line-height: 28px;
      }

      .unit {
        font-size: 12px;
      }
    }
  }

  .top-left-bottom {
    width: 100%;
    height: 32px;
    line-height: 32px;
    position: relative;
    background: linear-gradient(90deg,
        rgba(223, 249, 238, 0.1) 0%,
        rgba(199, 246, 230, 0.45) 100%);
    border-radius: 4px 4px 4px 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    margin-top: 20px;

    .lt {
      background: linear-gradient(270deg, #1c1f23 0%, #3c425c 100%);
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
      text-align: left;
      height: 100%;
      width: 150px;
      line-height: 32px;
      padding-left: 9px;
    }

    .vip {
      height: 100%;
      font-weight: 400;
      font-size: 12px;
      color: #1c1f23;
      line-height: 14px;
      line-height: 32px;
      padding-left: 7px;
      text-align: left;
    }

    .open-vip-btn {
      border-radius: 4px 4px 4px 4px;
      background: linear-gradient(90deg, #39d9c6 0%, #39cfa2 100%);
      border-radius: 4px 4px 4px 4px;
      color: #fff;
      font-size: 10px;
      cursor: pointer;
      padding: 2px 5px;
      position: absolute;
      right: 13px;
      top: 5px;
      line-height: 18px;
    }

    .open-vip-btn:hover {
      background: linear-gradient(90deg, #62d8ca 0%, #69eac3 100%);
    }
  }
}
</style>
